<template>
  <dv-border-box-8>
    <dv-decoration-7 style="width:100%;height:30px;">销售计划</dv-decoration-7>
    <div id="SalePlan" style="width: 100%;height: 270px"></div>
  </dv-border-box-8>

</template>

<script>

export default {
  name: "SalePlan",
  mounted() {
    this.initEchart();
  },
  methods: {
    getData() {
      return new Promise((resolve) => {
        // 静态数据配置
        resolve({
          category: ['1月', '2月', '3月', '4月', '5月', '6月'],
          barData: [25, 36, 48, 52, 65, 79],      // 已销售数据
          lineData: [30, 40, 50, 60, 70, 80],     // 计划销售数据
          rateData: [83, 90, 96, 87, 93, 99]      // 完成率百分比
        });
      })
    },
      initEchart() {
        let data = this.getData()
        data.then(res => {
          // 使用静态数据
          let sold = res.barData
          let planSale = res.lineData
          let rate = res.rateData
          let date = res.category
          let myChart = this.$echarts.init(document.getElementById('SalePlan'), 'dark');

          let option = {
            backgroundColor: '',
            tooltip: {
              trigger: 'axis', // 鼠标移动到图表上显示提示信息
              // 坐标轴指示器，坐标轴触发有效
              axisPointer: {
                type: 'cross',  // 十字准星
                crossStyle: {
                  color: '#fff'
                }
              }
            },
            legend: {
              data: ['已销售', '计划销售', '完成率']
            },
            xAxis: [
              {
                type: 'category',
                data: date,
                axisPointer: {
                  type: 'shadow'
                }
              }
            ],
            yAxis: [
              {
                type: 'value',
                name: '销售数量',
                axisLabel: {
                  formatter: '{value}万'
                }
              },
              {
                type: 'value',
                name: '完成率',
                min: 0,
                max: 100,
                interval: 20,
                axisLabel: {
                  formatter: '{value} %' // 百分比格式
                }
              }
            ],
            series: [
              {
                name: '已销售',
                type: 'bar',
                tooltip: {
                  valueFormatter: function (value) {
                    return value;
                  }
                },
                data: sold
              },
              {
                name: '计划销售',
                type: 'bar',
                tooltip: {
                  valueFormatter: function (value) {
                    return value;
                  }
                },
                data: planSale
              },
              {
                name: '完成率',
                type: 'line',
                yAxisIndex: 1,
                tooltip: {
                  valueFormatter: function (value) {
                    return value + ' %';
                  }
                },
                data: rate
              }
            ]
          };

          option && myChart.setOption(option);
        })


      }
  }
}
</script>

<style scoped>

</style>
